<template>
	<div class="">
		<div class="container">
			<div class="food_top">
				<div class="food_balace">
					<img :src="titleLogo" alt="">
					<div class="food_balace_item">

						<div>{{titleNews}}</div>
					</div>
				</div>
			</div>
			<div class="food_bar">
				<div class="food_bar_item">
					<div v-for="(item,index) in Pagemeuns" :key="index" :class="{active:index === pageIndex}" @click="changePagesMeun(index)">{{item.name}}</div>
				</div>
			</div>
			<!-- //左侧菜单栏 -->
			<div class="foods-meun">
				<scroll-view class="list-l" :scroll-y="true">
					<div class="l-item" v-for="(item,index) in foods" :key="index" :class="{active:index === tagIndex}" @click="getStoreList(item,index)">
						<!-- <img :src="item.icon" v-if="item.icon.length > 0"> -->
						{{item.name}}
						<!-- <text class="count" v-if="item.count > 0">{{item.count}}</text> -->
					</div>
				</scroll-view>
			<!-- 右侧菜单栏 -->
				<scroll-view class="list-r" :scroll-y="true">
					<div class="section">
						<span class="title">{{foodsname}}</span>
					</div>
					<div class="item-list" v-for="(item, index) in foodsItem" :key="index">
						<div class="item" @click="itemClick(item, index)">
							<div class="item-l">
								<img :src="item.values.image_url">
							</div>
							<div class="item-r">
								<span class="title">{{item.values.name}}</span>
								<span class="sub-title">{{item.description}}</span>
								<span class="sale-num">月售 {{item.values.count}}</span>
								<div class="r-t">
									<span class="price">￥{{item.values.unit_price}}</span>
									<div class="add-item">
										<div class="add-l" @click.stop="reduceClick(item, index)">
											<i class="icon mt-reduce-o"></i>
											<span v-if="item.values.num">{{item.values.num}}</span>
											<span v-if="item.values.num==''|| item.values.num==null">0</span>
										</div>
										<div class="add-r" @click.stop="addClick(item, index)">
											<i class="icon mt-add-o"></i>
										</div>
									</div>
								</div>
								<!-- <div class="tags-c">
                <img class="tags" :src="itm.picture_url" v-for="(itm, idx) in item.product_label_picture_list" :key="idx">
              </div> -->
							</div>
						</div>
					</div>
				</scroll-view>
			</div>
			<div class="footer-c">

				<div class="c-m">
					<div class="l">
						<span class="price">￥
							<span>{{totalPrice}}</span>
						</span>
						<div class="m-l">
							<span class="l-l">另需配送费￥45</span>
							<div class="l-m"></div>
							<span class="l-r">支持自取</span>
						</div>
					</div>
					<div class="m-r" :style="{'background-color': totalPrice>0 ? '#F0D179' : '#333'}" @click="orderClick">
						<span style="color:#666;">去结算</span>
					</div>
					<!-- <div class="m-r" @click="orderClick">
					<span>去结算</span>
				</div> -->
					<div class="cart_c_con">
						<div class="cart-c" @click="bottom_show">
							<img mode='widthFix' :src="productCount> 0 ? 'http://ovyjkveav.bkt.clouddn.com/18-9-28/55877074.jpg' : 'http://ovyjkveav.bkt.clouddn.com/18-9-25/77715001.jpg'">
							<span v-if="productCount">{{productCount}}</span>
						</div>
					</div>

				</div>
				<div class="footer_modal" v-show="bottom">
					<scroll-view class="scr" :scroll-y="true">
						<div class="zhezhao" @click.stop="bottom_hidde"></div>
						<div class="footer_contain">
							<div class="f_c">
								<span>已选商品</span>
								<span @click="clearCard">清空</span>
							</div>
							<div class="f_c_i" v-for="(item,index) in cardList" :key="index">
								<span class="name">{{item.values.name}}</span>

								<div class="jia">
									<span class="price">￥{{item.values.unit_price}}</span>
									<i class="icon mt-add-o i" @click.stop="cardReduce(item,1)"></i>
									<span class="num">{{item.values.num}}</span>
									<i class="icon mt-reduce-o i" @click.stop="cardReduce(item,-1)"></i>
								</div>
							</div>
						</div>
					</scroll-view>
				</div>
			</div>
		</div>
		<div class="logingBox" v-show="login">
			<img class="logingBoxicon" src="https://com-jiaozheng-oss.oss-cn-qingdao.aliyuncs.com/f81477e577b020a69397e6fb2a31e43a.png" alt="">
			<span class="logingtext">您还没有登陆，登陆后才能点餐噢</span>
			<div class="logingBtn">
				      <button
        open-type="getUserInfo"
        @getuserinfo="bindGetUserInfo"
        @click="getUserInfo1"
      >登录</button>
			</div>
		</div>
	</div>

</template>

<script>
export default {
	data() {
		return {
			
			pageIndex: 0,
			reduce: -1,
			bussinessName: '', //商家地址
			bussinessImg: '', //商家图片logo
			add: 1,
			foodNum: '', //商品数量
			isAuthorize: '',
			titleNews: '', //公告
			titleLogo: '', //餐厅logo
			cardList: [], //购物车详情
			bottom: false,
			productCount: 0,
			totalPrice: 0, //购物车总价
			typesId: '', //默认显示第一条数据的id
			tagIndex: 0,
			Pagemeuns: [{name: '菜单'}, {name: '评价'}, {name: '商家'}],
			foods: [],
			foodsItem: [],
			login:false,//登录状态
			sequence: -1,
			foodsname: '', //默认显示第一条分类食品标题
			isLogin: true,
			scanOrder: '', //扫码点餐的id
		}
	},
	onLoad(options) {
		this.foods=[]
		this.titleLogo=""
		this.titleNews=""
		this.foodsItem=[]
		this.isLogin = this.$store.state.user.islogin
		this.login=false
		console.log('授权', this.isLogin)
		if (options.orderId != undefined || options.orderId != null) {
			if(!this.isLogin){
				this.login=true
			}
			this.scanOrder = options.orderId
			console.log('扫码点餐的id', this.scanOrder)
		}else{
			this.scanOrder = ""
		}
		if (options.id == '' || options.id == undefined || options.id == null) {
			this.bussinessId = this.$store.state.user.resId
			console.log('如果没有餐厅id这里取', this.bussinessId)
		} else {
			console.log('取到了餐厅id')
			this.bussinessId = options.id
		}

		this.getNotice()
		this.getRF()
		this.settlement()
		this.getStoreList()
		this.countCart()
		this.getStoreListInfo()
	},
	onShow() {
		console.log("onshow=====================");
		
		this.settlement()
		this.getStoreList()
		this.countCart()

	},

	methods: {
		changePagesMeun(index) {
			console.log(index)
			this.pageIndex = index
		},
		bindGetUserInfo(e){
				if (e.mp.detail.rawData) {
				this.$store.state.user.backRes=true
				wx.navigateTo({
					url: '/pages/login/main',
				})
			}
		},
		
		//购物车的显示与隐藏
		bottom_show() {
			this.bottom = !this.bottom
			this.settlement()
		},
		bottom_hidde() {
			console.log('sd')
			this.bottom = false
		},
		getNotice() {
			let getParams = {
				url: '/SecAannouncementList',
				method: 'post',
				data: {
					restaurantId: this.bussinessId,
				},
			}
			this.$JZWX(getParams).then(re => {
				console.log(re)
			})
		},
		//清空购物车/cancelCart
		clearCard() {
			var userId = wx.getStorageSync('userId')
			let getParams = {
				url: '/miniprogramOrder/cancelCart',
				method: 'post',
				data: {
					restaurantId: this.bussinessId,
					userId: userId,
					orderId: this.scanOrder,
				},
			}
			this.$JZWX(getParams).then(re => {
				console.log(re)
				this.settlement()
				this.getStoreListInfo()
				this.countCart()
				this.bottom = false
			})
		},
		//获取餐厅信息
		getRF() {
			let getParams = {
				url: '/miniprogramComm/getRestaurantInfo',
				method: 'post',
				data: this.bussinessId,
			}
			this.$JZWX(getParams).then(re => {
				console.log('餐厅信息 ', re)
				this.titleNews = re.data.announcement
				this.titleLogo = re.data.logo
				var titleName = re.data.name
				wx.setNavigationBarTitle({
					title: titleName,
				})
			})
		},
		//购物车求和
		countCart() {
			var userId = wx.getStorageSync('userId')
			let getParams = {
				url: '/miniprogramOrder/countCart',
				method: 'post',
				data: {
					restaurantId: this.bussinessId,
					userId: userId,
					orderId: this.scanOrder,
				},
			}
			this.$JZWX(getParams).then(re => {
				this.productCount = re.data
			})
		},
		//购物车详情
		settlement() {
			var userId = wx.getStorageSync('userId')
			console.log(userId)
			let getParams = {
				url: '/miniprogramOrder/settlement',
				method: 'post',
				data: {
					restaurantId: this.bussinessId,
					userId: userId,
					orderId: this.scanOrder,
				},
			}
			this.$JZWX(getParams).then(re => {
				console.log(re)
				this.cardList = re.data.foodList
				this.totalPrice = re.data.tatolPrice
			})
		},
		//去结算
		orderClick() {
			if (this.cardList == '' || this.cardList == []) {
				wx.showToast({
					title: '请选择商品',
					image: '../../static/images/gantanhao.png',
				})
				return false
			}
			if (this.scanOrder == '' || this.scanOrder == undefined || this.scanOrder == null) {
				wx.navigateTo({
					url:
						'/pages/submitOrder/main?id=' +
						this.bussinessId +
						'&name=' +
						this.bussinessName +
						'&img=' +
						this.bussinessImg,
				})
			} else {
				wx.navigateTo({
					url:
						'/pages/scanOrder/main?id=' +
						this.bussinessId +
						'&name=' +
						this.bussinessName +
						'&orderId=' +
						this.scanOrder,
				})
			}
		},
		//购物车详情加减
		cardReduce(item, index) {
			let getParams = {
				url: '/miniprogramOrder/addCart',
				method: 'post',
				data: {
					restaurantId: this.bussinessId,
					userId: wx.getStorageSync('userId'),
					num: index,
					foodId: item.values.id,
				},
			}
			this.$JZWX(getParams).then(re => {
				this.cardList.map(i => {
					if (item.key == i.key) {
						i.values.num = re.data.foodNum
						this.settlement()
					}
				})
			})
		},
		//商品减
		reduceClick(item, num) {
			let getParams = {
				url: '/miniprogramOrder/addCart',
				method: 'post',
				data: {
					restaurantId: this.bussinessId,
					userId: wx.getStorageSync('userId'),
					num: -1,
					foodId: item.values.id,
				},
			}
			this.$JZWX(getParams).then(re => {
				console.log('商品减', re)
				this.foodsItem.map(i => {
					if (item.key == i.key) {
						i.values.num = re.data.foodNum
						this.countCart()
						this.settlement()
					}
				})
			})
		},
		//添加商品
		addClick(item, num) {
			if(!this.isLogin){
				this.login=true
				return false;
			}
			let getParams = {
				url: '/miniprogramOrder/addCart',
				method: 'post',
				data: {
					restaurantId: this.bussinessId,
					userId: wx.getStorageSync('userId'),
					num: 1,
					foodId: item.values.id,
					orderId: this.scanOrder,
				},
			}
			this.$JZWX(getParams).then(re => {
				console.log('re', re)
				console.log('宝马', this.foodsItem)
				// this.foodsItem = re.data.foodNum
				this.foodsItem.map(i => {
					console.log('aswdasaaaaaaaaaaaaaaaaaaaaaaaaa', re.data.foodNum)
					console.log('ley', item.key)
					console.log('i.key', i.key)
					console.log('i', i)
					if (item.key == i.key) {
						console.log(i.values.num)
						// this.foodsItem = re.data.foodNum
						i.values.num = re.data.foodNum
						this.countCart()
						this.settlement()
					}
				})
			})
		},
		/**
		 * @Description: ${获取餐厅的评价列表}
		 * @Param 1:好评，2：差评，3：有图
		 * @Return
		 * @Author 焦政
		 * @Date 2018/11/21
		 * @Version 1.0
		 */
		// getEvaluate(type = ''){
		//     let getParams = {
		//         url:'/RestComment',
		//         method:'post',
		//         data:{
		//             resId:'aaa',
		//             type:type
		//         }
		//     }
		//     this.$JZWX(getParams).then(re=>{
		//     })
		// },
		/**
		 * @Description: ${店家菜单}
		 * @Param
		 * @Return
		 * @Author 焦政
		 * @Date 2018/11/21
		 * @Version 1.0
		 */
		//左侧栏菜品分类
		getStoreList(item, index) {
			this.tagIndex = index
			let getParams = {
				url: '/miniprogramComm/fcategory',
				method: 'post',
				data: {
					restaurantId: this.bussinessId,
				},
			}
			this.$JZWX(getParams).then(re => {
				console.log('左侧栏分类信息', re)
				this.foods = re.data
				this.typesId = re.data[0].id
				this.foodsname = re.data[0].name
				if (item) {
					console.log('item', item)
					this.typesId = item.id
					this.foodsname = item.name
				}
				this.getStoreListInfo()
			})
		},
		/**
		 * @Description: ${获取菜单下的菜品}
		 * @Param
		 * @Return
		 * @Author 焦政
		 * @Date 2018/11/21
		 * @Version 1.0
		 */
		getStoreListInfo() {
			var userId = wx.getStorageSync('userId')
			let getParams = {
				url: '/miniprogramComm/foodListByUser',
				method: 'post',
				data: {
					goupId: this.typesId,
					userId: userId,
					restaurantId: this.bussinessId,
					orderId: this.scanOrder,
				},
			}
			this.$JZWX(getParams).then(re => {
				this.foodsItem = re.data
				console.log('右侧菜品', this.foodsItem)
				this.foodsItem.map(item => {
					// console.log('ccc', this.foodsItem)
				})
			})
		},
		// // 修改map中的值
		// isHaving(id) {
		// 	for (var i in this.foodsItem) {
		// 		if (id == this.foodsItem[i].key) {
		// 			// this.foodsItem[i][key] =
		// 		}
		// 	}
		// },
	},
}
</script>
<style lang="scss">
.logingBox {
	width: 100%;
	height: 100vh;
	position: fixed;
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	.logingBoxicon {
		width: 400rpx;
		height: 400rpx;
		opacity: 0.5;
	}
	.logingtext {
		font-size: 14px;
	}
	.logingBtn {
		button{
		width: 146rpx;
		height: 69rpx;
		text-align: center;
		line-height: 69rpx;
		background-color: #fecb55;
		margin: 30px 0;
		border-radius: 2px;
		font-size:28rpx;
		}

	}
}
.container {
	width: 100%;
	.food_top {
		background: #333333;
		.food_balace {
			img {
				width: 50px;
				height: 50px;
				padding: 20rpx;
			}
			display: flex;
			align-items: center;
			.food_balace_item {
				div {
					font-size: 20rpx;
					line-height: 25px;
					color: #fff;
				}
			}
		}
	}
	.food_bar {
		width: 100%;
		background: #fff;
		.food_bar_item {
			height: 40px;
			border-bottom: solid 2rpx #e9e9e9;
			display: flex;
			align-items: center;
			justify-content: space-around;
			div {
				font-size: 25rpx;
				height: 40px;
				line-height: 40px;
				font-family: '楷体';
			}
		}
	}
	.foods-meun {
		display: flex;
		width: 100%;
		position: fixed;
		top: 224rpx;
		bottom: 110rpx;
		.list-l {
			display: flex;
			flex-direction: column;
			width: 160rpx;
			background-color: #f5f9fc;
			.l-item {
				display: flex;
				width: 160rpx;
				align-items: center;
				justify-content: center;
				padding: 20rpx;
				box-sizing: border-box;
				position: relative;
				font-size:25rpx;
				.null {
					height: 30px;
					width: 80px;
					background: #000;
				}
				img {
					width: 30rpx;
					height: 30rpx;
					background-size: cover;
					border-radius: 15rpx;
				}
				span {
					font-size: 24rpx;
					color: $textDarkGray-color;
					margin-left: 10rpx;
				}
				.count {
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: $mtRed-color;
					width: 30rpx;
					height: 30rpx;
					border-radius: 15rpx;
					right: 0;
					top: 6rpx;
					position: absolute;
					font-size: 20rpx;
					color: white;
				}
			}
			.active {
				background-color: white;
				color: #000;
				font-weight: bold;
			}
		}
		.list-r {
			display: flex;
			flex-direction: column;
			flex: 1;
			background-color: white;
			.section {
				display: flex;
				height: 70rpx;
				align-items: center;
				margin-left: 20rpx;
				span {
					font-size: 28rpx;
					color: $textBlack-color;
				}
			}
			.item-list {
				display: flex;
				margin: 0 20rpx;
				flex-direction: column;
				.item {
					display: flex;
					margin-bottom: 30rpx;
					.item-l {
						img {
							width: 160rpx;
							height: 160rpx;
							background-size: cover;
						}
					}
					.item-r {
						display: flex;
						flex-direction: column;
						margin-left: 20rpx;
						justify-content: space-between;
						flex: 1;
						.title {
							font-size: 28rpx;
							color: $textBlack-color;
							font-weight: bold;
							overflow: hidden;
							line-height: 30rpx;
							height: 30rpx;
						}
						.sub-title {
							font-size: 20rpx;
							color: $textDarkGray-color;
							line-height: 30rpx;
							overflow: hidden;
							height: 30rpx;
							margin-top: 10rpx;
						}
						.sale-num {
							font-size: 20rpx;
							color: $textDarkGray-color;
							margin-top: 10rpx;
						}
						.r-t {
							display: flex;
							align-items: center;
							justify-content: space-between;
							.price {
								font-size: 32rpx;
								color: $mtRed-color;
								font-weight: bold;
							}
							.sku {
								display: flex;
								align-items: center;
								justify-content: center;
								background-color: $theme-color;
								padding: 8rpx 12rpx;
								border-radius: 25rpx;
								position: relative;
								span {
									font-size: 20rpx;
									color: $textBlack-color;
								}
								.count {
									width: 30rpx;
									height: 30rpx;
									background-color: $mtRed-color;
									display: flex;
									align-items: center;
									justify-content: center;
									position: absolute;
									color: white;
									font-size: 20rpx;
									right: 0;
									top: -14rpx;
									border-radius: 15rpx;
								}
							}
							.add-item {
								display: flex;
								align-items: center;
								.add-l {
									display: flex;
									flex-direction: row;
									align-items: center;
									i {
										font-size: 36rpx;
										color: $textGray-color;
									}
									span {
										font-size: 24rpx;
										color: $textBlack-color;
										margin: 0 20rpx;
									}
								}
								.add-r {
									i {
										color: $theme-color;
										font-size: 40rpx;
									}
								}
							}
						}
						.tags-c {
							display: flex;
							align-items: center;
							margin-top: 10rpx;
							flex-wrap: wrap;
							img {
								width: 60rpx;
								height: 30rpx;
								background-size: cover;
							}
						}
					}
				}
			}
		}
		::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
		}
	}
	.footer-c {
		display: flex;
		flex-direction: column;
		position: fixed;
		bottom: 0;
		background-color: #333;
		z-index: 990;
		width: 100%;
		.c-t {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 50rpx;
			background-color: #ffefd2;
			span {
				font-size: 20rpx;
				color: $textBlack-color;
			}
		}
		.c-m {
			display: flex;
			justify-content: center;
			.l {
				display: flex;
				flex-direction: column;
				flex: 1;
				justify-content: space-around;
				padding-left: 82px;
				background: #333;

				.price {
					font-size: 24rpx;
					color: white;
					span {
						font-size: 40rpx;
						color: white;
					}
				}
				.m-l {
					display: flex;
					align-items: center;
					.l-l {
						font-size: 24rpx;
						color: $textDarkGray-color;
					}
					.l-m {
						width: 2rpx;
						height: 20rpx;
						background-color: $textDarkGray-color;
						margin: 0 20rpx;
					}
					.l-r {
						font-size: 24rpx;
						color: $textDarkGray-color;
					}
				}
			}
			.m-r {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 200rpx;
				height: 93rpx;
				background-color: #2f2f2f;
				span {
					font-size: 32rpx;
					color: $textDarkGray-color;
					font-weight: bold;
				}
			}
		}
		.cart_c_con {
			position: absolute;
			left: 19rpx;
			top: -23rpx;
			z-index: 991;
			width: 119rpx;
			height: 119rpx;
			background-color: #333;
			border-radius: 50%;

			.cart-c {
				position: absolute;
				left: 17rpx;
				top: 5rpx;
				z-index: 991;
				img {
					width: 85rpx;
					height: 85rpx;
					background-size: cover;
				}
				span {
					position: absolute;
					right: 0;
					top: 20rpx;
					background-color: $mtRed-color;
					width: 30rpx;
					height: 30rpx;
					border-radius: 15rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
					font-size: 20rpx;
				}
			}
		}
		.cart-c {
			position: absolute;
			left: 20rpx;
			top: 20rpx;
			z-index: 991;
			img {
				width: 85rpx;
				height: 85rpx;
				background-size: cover;
			}
			span {
				position: absolute;
				right: 0;
				top: 20rpx;
				background-color: $mtRed-color;
				width: 30rpx;
				height: 30rpx;
				border-radius: 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				font-size: 20rpx;
			}
		}
	}
	.footer_modal {
		background: #fff;
		width: 100%;
		position: relative;
		position: absolute;
		bottom: 99rpx;
		visibility: visible;
		.scr {
			height: 663rpx;
		}
		.zhezhao {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.7);
			z-index: -1000;
		}
		.footer_contain {
			position: relative;
			z-index: 500;
			background: #fff;
			padding-bottom: 30rpx;

			.f_c {
				display: flex;
				padding: 20rpx;
				justify-content: space-between;
				align-items: center;
				font-size: 25rpx;
				font-family: '楷体';
				color: #999;
			}
			.f_c_i {
				display: flex;
				padding: 20rpx;
				justify-content: space-between;
				align-items: center;
				font-size: 25rpx;
				font-weight: bold;

				.name {
					font-weight: 800;
				}
				.jia {
					width: 261rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					.price {
						padding-right: 16px;
						color: #f44;
						width: 30px;
						text-align: right;
					}
					.num {
						width: 75rpx;
						text-align: center;
					}
					.i {
						color: #f9d173;
						font-size: 40rpx;
						display: inline-block;
					}
				}
			}
		}
	}
}
</style>
<style>
page {
	background: #fff;
}
.active {
	font-weight: bold;
	border-bottom: 2rpx solid #e7d69e;
}
.active1 {
	background: #fff;
}
</style>

